import React,{useEffect,useState} from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'

function List(){
    useEffect(()=>{
        console.log('useEffect-> List page')
        //组件解绑方式,这种方式只要组件方式变化都会执行，也就是所有状态更新都监听，并执行
        return()=>{
            console.log('List leave')
        }
    })
    return(
        <div>List Page</div>
    )
}

function Index(){
    useEffect(()=>{
        console.log('useEffect-> Index page')
        //解绑组件，[count]表示只有当count 发生变化的时候才执行解绑器，其他不执行
        //[] 表示只有组件程序挂载才执行,componentWillUnmount
        return()=>{
            console.log('index leave')
        }
    },[])
    return(
        <div>Index Page</div>
    )
}

function ExampleEffectj(){
    let [count,setCount] = useState(0)
    return(
        <div>
            <p>You Click {count}</p>
            <button onClick={()=>{setCount(count + 1)}}>click</button>

            <Router>
                <ol>
                    <Link to="/List">List</Link>
                    <br/>
                    <Link to="/Index">Index</Link>
                </ol>
                <main>
                    <h2>useEffect - componentWillUnmount</h2>
                    <Route path="/Index" component={Index} />
                    <Route path="/List" component={List}/>
                </main>
            </Router>
        </div>
    )
}

export default ExampleEffectj;